<div >
  <div class="mat-elevation-z4 pagedescription">
    This page shows all application roles granted in the tenant. These roles are often used to manage access to applications or APIs. If the role is granted to a user/group, it is often used to grant access to an application or to give the user an (administrative) role in an application. If the role is assigned to a ServicePrincipal, the role is often used to manage API permissions, such as for the Microsoft Graph (the Azure Portal calls this an application permission).
  </div>
      <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <ng-container matColumnDef="pname">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Principal Name</th>
      <td mat-cell *matCellDef="let row"><a [routerLink]="['/', row.ptype.toLowerCase()+'s', row.objid]">{{row.pname}}</a></td>
    </ng-container>

    <ng-container matColumnDef="ptype">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Principal Type</th>
      <td mat-cell *matCellDef="let row">{{row.ptype}} </td>
    </ng-container>

    <ng-container matColumnDef="objid">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Object ID</th>
      <td mat-cell *matCellDef="let row">{{row.objid}} </td>
    </ng-container>

    <ng-container matColumnDef="app">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Application</th>
      <td mat-cell *matCellDef="let row"><a [routerLink]="['/serviceprincipals', row.spid]">{{row.app}}</a></td>
    </ng-container>

    <ng-container matColumnDef="value">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Role</th>
      <td mat-cell *matCellDef="let row">{{row.value}} </td>
    </ng-container>

    <ng-container matColumnDef="desc">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
      <td mat-cell *matCellDef="let row">{{row.desc}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[50, 100, 500, 1000, 5000]"></mat-paginator>
</div>
<router-outlet></router-outlet>
